<template>
    <div class="screen">
        <div class="tit">{{this.examOne.examname}}</div>
        <div class="time">{{Hour}}:{{Min}}:{{Second}}</div>
        <div class="sc">{{this.examOne.examdesc}}</div>
        <div class="line"></div>
        <div class="question" v-for="(item, index) in this.listQuestion" :key="index">
            <div class="title">
                <span style="display: inline-block; margin-right: 8px; font-weight: 600">{{index + 1}}</span>
                <span v-if="item.questioncontent !== null">{{item.questioncontent}}</span>
                <span v-else>{{item.stuinfo}}</span>
            </div>
            <div v-if="item.questiontype === 1||item.questiontype === 3">
                <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                    <div>
                        <el-radio-group style="padding: 7px 0" v-model="item.images">
                            <el-radio :label="ind">
                                <span>{{ite.answer}}</span>
                            </el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <div v-if="item.questiontype === 2">
                <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                    <el-checkbox style="padding: 7px 0" v-model="ite.preview" :label="ind">
                        <span>{{ite.answer}}</span>
                    </el-checkbox>
                </div>
            </div>
            <div v-if="item.questiontype === 4">
                <div class="opt" v-for="(ite,ind) in item.answer" :key="ind">
                    <el-input v-model="item.images"></el-input>
                </div>
            </div>
            <div v-if="item.questiontype === 5">
                <div v-if="item.stuinfo ==='性别'">
                    <el-radio-group style="padding: 7px 0" v-model="item.images">
                        <el-radio label="0">
                            <span>男</span>
                        </el-radio>
                        <el-radio label="1">
                            <span>女</span>
                        </el-radio>
                    </el-radio-group>
                </div>
                <div v-else>
                    <div class="opt" >
                        <el-input v-model="item.images"></el-input>
                    </div>
                </div>
            </div>
            <div v-if="item.questiontype === 6">
                <div class="opt" >
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" v-model="item.images"></el-input>
                </div>
            </div>
        </div>
        <el-button @click="sub" class="btn" type="primary" round>提交</el-button>
        <div class="bLine"></div>
        <div class="ks"><a href="/Home">考神</a>提供技术支持</div>
    </div>
</template>

<script>
    export default {
        name: "Phone",
        data(){
            return{
                H:'',
                M:'',
                S:'',
                h:0,
                m:0,
                s:0,
                id:'',
                listQuestion:'',
                exam:[],
                examOne:''
            }
        },
        created(){
            this.getNowTime();
            this.getDurTime();
            this.getQuestions();
            this.getExam();
        },
        computed: {
            Hour: function(){
                return this.H.toString().length===1?'0'+this.H:this.H;
            },
            Min: function(){
                return this.M.toString().length===1?'0'+this.M:this.M;
            },
            Second: function(){
                return this.S.toString().length===1?'0'+this.S:this.S;
            }
        },
        methods:{
            getNowTime(){
                console.log((new Date()).toLocaleString('chinese', { hour12: false }));
                this.startTime=(new Date()).toLocaleString('chinese', { hour12: false });
            },
            getTime(){
                console.log((new Date()).toLocaleString('chinese', { hour12: false }));
                this.endTime=(new Date()).toLocaleString('chinese', { hour12: false });
            },
            getDurTime(){
                setInterval(()=>{
                    if(this.s < 60){
                        this.s++;
                    }else if(this.s === 60 && this.m <60){
                        this.m++;
                        this.s = 0;
                    }else if(this.m === 60 ){
                        this.h++;
                        this.m = 0;
                        this.s = 0;
                    }
                }, 1000)
            },
            sub(){//提交
                this.getTime();
                this.listQuestion.forEach(function(value, index){
                    if(value.questiontype === 5 && value.stuinfo === '姓名' && value.images === null){
                        alert("姓名可不能为空哦！");
                    }
                });
                // var time = this.examOne.duration
                // var examtime = time - (this.H*60+this.M);
                // console.log(examtime);
                // // console.log(this.examOne);
                // console.log(this.listQuestion);
                var hour = this.h.toString().length===1?'0'+this.h:this.h;
                var min = this.m.toString().length===1?'0'+this.m:this.m;
                var second = this.s.toString().length===1?'0'+this.s:this.s;
                var examtime = hour+":"+min+":"+second;
                var datas=[];
                var answerU=[];
                var stuinfoU;
                var userName;
                this.listQuestion.forEach(function(value, index){
                    if(value.questiontype === 1 ||value.questiontype === 3){
                        value.answer.forEach(function(v, i){
                            if(i === value.images){
                                v.istrue = "True"
                            }else{
                                v.istrue = "false"
                            }
                            answerU.push({
                                istrue: v.istrue
                            })
                        })
                    }else if(value.questiontype === 2){
                        value.answer.forEach(function(v, i){
                            if(v.preview === true){
                                v.istrue = "True"
                            }else{
                                v.istrue = "false"
                            }
                            answerU.push({
                                istrue: v.istrue
                            })
                        })
                    }else if(value.questiontype === 4){
                        answerU.push({
                            answer: value.images
                        })
                    }else if(value.questiontype === 6){
                        answerU.push({
                            answer: value.images
                        })
                    }else if(value.questiontype === 5){
                        if(value.stuinfo === '姓名'){
                            userName = value.images
                        }
                        if(value.stuinfo === '性别'){
                            stuinfoU = value.images==='0'?"男":"女"
                        }else{
                            stuinfoU = value.images;
                        }
                    }
                    datas.push({
                        questiontype:value.questiontype,
                        questionid:value.questionid,
                        score:value.score,
                        answer:answerU,
                        stuinfo:stuinfoU
                    })
                    answerU = [];
                });
                this.$axios.post('exam/addExamRecord',datas,{
                    params:{
                        id: this.examOne.id,
                        examtime: examtime,
                        starttime: this.startTime,
                        endtime:this.endTime,
                        answername: userName
                    },
                })
                this.$router.push("/Sphone");
            },
            getQuestions(){
                this.$axios.post('exam/showQuestions',{
                    id: this.$route.params.id
                }).then(res => {
                    this.listQuestion = res.data;
                    console.log(this.listQuestion);
                })
            },
            getExam(){
                this.$axios.get('exam/examList')
                    .then(res => {
                        this.exam = res.data;
                        console.log(this.$route.params.id);
                        var id = this.$route.params.id;
                        console.log(id);
                        for(let i in this.exam){
                            if(this.exam[i].id === parseInt(id)){
                                this.examOne = this.exam[i];
                                console.log(this.examOne);
                                this.timeD(this.examOne);
                            }
                        }
                    });
            },
            timeD(examOne){
                var duration = examOne.duration;
                console.log(examOne.duration);
                this.H = parseInt(duration / 60)>0?parseInt(duration / 60):0;
                this.M = this.H===0?duration:parseInt(duration - (this.H * 60));
                this.S = 0;
                setInterval(()=>{
                    if(this.S !== 0) {
                        this.S--;
                    } else if(this.M !== 0) {
                        this.M--;
                        this.S = 59;
                    } else if(this.H !== 0) {
                        this.H--;
                        this.M = 59;
                        this.S = 59;
                    }
                }, 1000);
            },
        }
    }
</script>

<style scoped>
    .screen{
        overflow: scroll;
        overflow-x:hidden;
        overflow-y:hidden;
    }
.tit{
    text-align: center;
    font-size: 25px;
    margin-top: 6%;
    font-weight: 600;
    color: RGB(179,192,209);
}
    .time{
        padding-top: 2%;
        text-align: center;
        font-size: 14px;
    }
.sc{
    font-size: 14px;
    margin-top: 7%;
    text-align: center;
}
    .screen{
        padding: 0 5%;
    }
    .question{
        width: 100%;
        margin: 10% auto;
    }
    .title{
        margin-top: 10px;
    }
    .opt{
        margin: 10px 5px;
    }
    .btn{
        width: 45%;
        height: 25%;
        display: block;
        margin: 7% auto;
        border: 1px solid RGB(179,192,209);
        background-color: RGB(179,192,209);
    }
    .btn:hover{
        background-color: RGB(175,177,235)
    }
    .line{
        height: 3px;
        width: 98%;
        background-color: RGB(179,207,220);
        margin: 5% auto;
    }
    .bLine{
        height: 1px;
        width: 98%;
        background-color: RGB(187,187,187);
        margin: 10% auto 5%;
    }
    .ks{
        font-size: 12px;
        color: RGB(102,102,102);
        text-align: center;
    }
    .ks a{
        font-size: 13px;
        display: inline-block;
        margin-right: 1%;
        color: RGB(102,102,102);
        margin-bottom: 4%;
    }
    .ks a:hover{
        color: RGB(179,192,209);
    }
</style>
